<template>
  <div>
    <div class="tag-container mt10" ref="table-head">
      <div class="table-tool">
        <el-tag :class="{'tag':!isSelected(item.id),'select-tag':isSelected(item.id)}" class="mr10 point" v-for="item in label" v-bind:key="item.id" :type="item.color" @click="selectTag(item.id)" :hit="isSelected(item.id)">{{item.value}}</el-tag>
      </div>
      <div class="button-container" style="height: 40px">
        <el-button type="primary" @click="AddTags">批量添加标签</el-button>
        <el-button @click="DeleteTags">批量删除标签</el-button>
      </div>
    </div>
    <el-table ref="table_container" header-align="center" :data="data" stripe :height="tableHeight" v-loading="loading" @selection-change="handleSelectionChange" header-cell-class-name="table-header-cell" cell-class-name="table-cell">
      <el-table-column type="selection" fixed/>
      <el-table-column prop="schoolRollId" label="学籍号" width="200px" fixed/>
      <el-table-column prop="name" label="姓名" width="200px"/>
      <el-table-column prop="grade" label="年级" width="200px"/>
      <el-table-column prop="schoolName" label="学校名称" width="200px"/>
      <el-table-column prop="yearOld" label="年龄" width="200px"/>
      <el-table-column prop="sex" label="性别" width="200px"/>
      <el-table-column prop="physicalTotalScore" label="综合成绩" width="200px"/>
      <el-table-column align="center" label="标签" width="400px" fixed="right">
        <template  slot-scope="scope">
          <el-tag class="mr10" v-for="item in scope.row.label" v-bind:key="item.id" :type="item.color" :closable="true" @close="deleteTag(scope.row.id,item.id)">{{item.value}}</el-tag>
          <el-select :blur="submitAddTag(scope.$index)" style="width: 200px" v-if="editState[scope.$index]" v-model="editId[scope.$index]" placeholder="请选择">
            <el-option v-for="item in label" :key="item.id" :label="item.value" :value="item.id">
              <el-tag style="float: right" class="mr10" :type="item.color">{{item.value}}</el-tag>
            </el-option>
          </el-select>
          <el-button v-else size="small" @click="addNewTag(scope.$index)">+ New Tag</el-button>
        </template>
      </el-table-column>
    </el-table>
    <div class="block">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="pagination.currentPage"
        :page-sizes="[10, 20, 30, 40, 50, 60, 70, 80, 90, 100]"
        :page-size="pagination.pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total">
      </el-pagination>
    </div>
  </div>
</template>

<script>
import { GetLabelTable, GetTagTable, AddTag, AddTags, DeleteTag, DeleteTags } from '../../../api/table'
import { mapGetters } from 'vuex'
export default {
  name: 'tag',
  data () {
    return {
      label: [],
      selectTags: [],
      data: [],
      tableHeight: '0px',
      loading: false,
      pagination: {
        pageSize: 10,
        currentPage: 1
      },
      total: 0,
      editState: [],
      editId: [],
      multipleSelection: []
    }
  },
  mounted () {
    this.getLabels()
    setTimeout(this.reInitTableHeight, 100)
  },
  methods: {
    handleSelectionChange (val) {
      this.multipleSelection = val
    },
    handleSizeChange (val) {
      this.pagination.pageSize = val
    },
    handleCurrentChange (val) {
      this.pagination.currentPage = val
    },
    getLabels () {
      GetLabelTable(Number.MAX_SAFE_INTEGER, 1).then((res) => {
        this.label = res.data.data
      })
    },
    isSelected (id) {
      if (this.selectTags.indexOf(id) !== -1) {
        return true
      }
      return false
    },
    selectTag (id) {
      if (this.selectTags.indexOf(id) !== -1) {
        this.selectTags.splice(this.selectTags.indexOf(id), 1)
      } else {
        this.selectTags.push(id)
      }
    },
    addNewTag (index) {
      this.editState[index] = true
      this.editState.push(true)
      this.editState.pop()
    },
    AddTags () {
      if (this.selectTags.length === 0 || this.multipleSelection.length === 0) {
        return
      }
      let data = []
      for (let i = 0; i < this.multipleSelection.length; i++) {
        data.push({ studentId: this.multipleSelection[i].id, labelId: this.selectTags })
      }
      AddTags(data).then((res) => {
        this.$store.dispatch('SetFlash')
      })
    },
    DeleteTags () {
      if (this.selectTags.length === 0 || this.multipleSelection.length === 0) {
        return
      }
      let data = []
      for (let i = 0; i < this.multipleSelection.length; i++) {
        data.push({ studentId: this.multipleSelection[i].id, labelId: this.selectTags })
      }
      DeleteTags(data).then((res) => {
        this.$store.dispatch('SetFlash')
      })
    },
    submitAddTag (index) {
      if (this.editId[index] === '') {
        return
      }
      let tagId = this.editId[index]
      this.editId[index] = 0
      this.editState[index] = false
      this.editState.push(true)
      this.editState.pop()
      AddTag(this.data[index].id, tagId).then((res) => {
        this.$store.dispatch('SetFlash')
      })
    },
    deleteTag (studentId, labelId) {
      DeleteTag(studentId, labelId).then((res) => {
        this.$store.dispatch('SetFlash')
      })
    },
    flashTable () {
      this.loading = true
      GetTagTable(this.pagination.pageSize, this.pagination.currentPage).then((res) => {
        this.data = res.data.data
        this.total = res.data.total
        this.loading = false
        this.editState = []
        this.editId = []
        for (let i = 0; i < res.data.data.length; i++) {
          this.editState.push(false)
          this.editId.push('')
        }
      })
    },
    reInitTableHeight () {
      if (document.documentElement.clientHeight - 70 - this.$refs['table_container'].$el.offsetTop < 0) {
        setTimeout(this.reInitTableHeight, 10)
      } else if (document.documentElement.clientHeight - 70 - this.$refs['table_container'].$el.offsetTop <= 500) {
        this.tableHeight = '500px'
      } else {
        this.tableHeight = document.documentElement.clientHeight - 70 - this.$refs['table_container'].$el.offsetTop + 'px'
      }
    }
  },
  computed: {
    ...mapGetters([
      'height',
      'provinceId',
      'cityId',
      'areaId',
      'joinYear',
      'schoolName',
      'schoolId',
      'schoolRollId',
      'flash'
    ])
  },
  watch: {
    height: function (val) {
      this.$nextTick(this.reInitTableHeight)
    },
    'pagination.currentPage': {
      handler () {
        this.flashTable()
      },
      immediate: true,
      deep: true
    },
    'pagination.pageSize': {
      handler () {
        this.flashTable()
      },
      immediate: true,
      deep: true
    },
    provinceId: function (val) {
      this.pagination.currentPage = 1
      this.flashTable()
    },
    cityId: function (val) {
      this.pagination.currentPage = 1
      this.flashTable()
    },
    joinYear: function (val) {
      this.pagination.currentPage = 1
      this.flashTable()
    },
    areaId: function (val) {
      this.pagination.currentPage = 1
      this.flashTable()
    },
    schoolName: function (val) {
      this.pagination.currentPage = 1
      this.flashTable()
    },
    schoolId: function (val) {
      this.pagination.currentPage = 1
      this.flashTable()
    },
    schoolRollId: function (val) {
      this.pagination.currentPage = 1
      this.flashTable()
    },
    flash: function () {
      this.flashTable()
    }
  }
}
</script>

<style scoped>
  @import "../../../styles/common.css";
  .table-tool {
    width: 100%;
    padding: 15px 10px;
  }
  .point {
    cursor: pointer;
  }
  .tag:hover {
    color: black;
  }
  .select-tag {
    color: black;
  }
  .tag-container {
    display: flex;
    justify-content: space-between;
    align-items:center;
  }
  .button-container {
    display: flex;
    margin-right: 10px;
  }
</style>
